<template>
	<view class="my-room">
		<view class="box-header">
			<view class="box-header-left">
				<view class="inner-top">
					<span>门店：</span>
					<picker @change="storePickerChange" :range="storeArray" range-key="name">
						<view class="picker-tip">{{currentStore.name || '请选择门店'}}</view>
					</picker>
					<uni-icons type="down" color="#000" size="20"></uni-icons>
				</view>
				<view class="inner-bottom">
					<span v-for="(item,index) in currentStore.modelCountList" :key="index">{{item.modelName}}：{{item.count}}</span>
				</view>
			</view>
		</view>
		<view>
			<view v-if="tabs.length" :key="updateKey" class="tabs">
				<v-tabs :tabs="tabs" :zIndex="3" v-model="current" :scroll="false" bgColor="#FFF" color="#000"
					line-color="#ff9600" lineHeight='5rpx' active-color="#000" style="width: 100%" :lineScale="0.1"
					ref="tabs" @change="changeTab"></v-tabs>
			</view>
			<!-- 订单列表 -->
			<view class="container-tabs__list">
				<swiper class="container-tabs__swiper" :current="current" @animationfinish="animationFinished">
					<swiper-item class="swiper-item" v-for="(outItem, outIndex) in list" :key="outIndex">
						<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
							<view class="order-cart-list">
								<view>
									<chessCard :dataList="list[current].data" @openPopEvent="openPopEvent"></chessCard>
								</view>
							</view>
							<view class="noMore" v-if="outItem.total === list[outIndex].data.length">暂无更多</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<addGroup ref="addGroupDom">
			<!-- 使用中 -->
			<view class="btn-box" v-if="currentProduct.useStatus === '0'">
				<view class="common-btn bg-01" @click="openDoor">开门</view>
				<view class="common-btn bg-02" @click="openElectronic">通电</view>
				<view class="common-btn bg-03" @click="closeElectronic">断电</view>
				<view class="common-btn bg-04" @click="toBookPage">代预定</view>
				<view class="common-btn bg-05" @click="finishOrder">结束订单</view>
				<view class="common-btn bg-07" @click="toChangeRoom">更换包间</view>
				<view class="common-btn bg-08" @click="toDelayTime">延时</view>
			</view>

			<!-- 空闲中 -->
			<view class="btn-box" v-if="currentProduct.useStatus === '1'">
				<view class="common-btn bg-01" @click="openDoor">开门</view>
				<view class="common-btn bg-02" @click="openElectronic">通电</view>
				<view class="common-btn bg-09" @click="beginClear">开启保洁</view>
				<view class="common-btn bg-03" @click="closeElectronic">断电</view>
				<view class="common-btn bg-04" @click="toBookPage">代预定</view>
				<view class="common-btn bg-06" @click="startMaintenance">开启设备维护</view>
			</view>

			<!-- 保洁中 -->
			<view class="btn-box" v-if="currentProduct.useStatus === '2'">
				<view class="common-btn bg-01" @click="openDoor">开门</view>
				<view class="common-btn bg-02" @click="openElectronic">通电</view>
				<view class="common-btn bg-03" @click="closeElectronic">断电</view>
				<view class="common-btn bg-04" @click="toBookPage">代预定</view>
				<view class="common-btn bg-07" @click="clearSuccess">完成保洁</view>
			</view>

			<!-- 维护中 -->
			<view class="btn-box" v-if="currentProduct.useStatus === '3'">
				<view class="common-btn bg-01" @click="openDoor">开门</view>
				<view class="common-btn bg-02" @click="openElectronic">通电</view>
				<view class="common-btn bg-03" @click="closeElectronic">断电</view>
				<view class="common-btn bg-06" @click="maintenanceSuccess">完成设备维护</view>
			</view>
		</addGroup>
	</view>
</template>

<script>
	import addGroup from '@/components/add-group.vue'
	import chessCard from '@/components/chessCard.vue'
	export default {
		components: {
			chessCard,
			addGroup
		},
		data() {
			return {
				updateKey:0,
				storeArray: [],
				currentStore: '',
				currentProduct: {},
				tabs: [],
				tabsDetailArr: [],
				current: 0,
				list: []
			}
		},

		methods: {
			// 代预定
			toBookPage() {
				this.closePopEvent()
				uni.navigateTo({
					url: `/pages/book-page/book-page?shopId=${this.currentStore.shopId}&productId=${this.currentProduct.productId}`
				})
			},
			// 延时
			toDelayTime() {
				this.closePopEvent()
				uni.navigateTo({
					url: `/pages/delay-time/delay-time?orderId=${this.currentProduct.useOrderId}&time=${this.currentProduct.useEndTime}`
				})
			},
			// 更换包间
			toChangeRoom() {
				this.closePopEvent()
				uni.navigateTo({
					url: `/pages/change-room/change-room?orderId=${this.currentProduct.useOrderId}&shopId=${this.currentStore.shopId}`
				})
			},
			// 打开弹窗
			openPopEvent(item) {
				this.currentProduct = item;
				this.$refs.addGroupDom.openPop()
			},
			// 关闭弹窗
			closePopEvent() {
				this.$refs.addGroupDom.closePop()
			},
			// 选择门店
			storePickerChange(e) {
				this.currentStore = this.storeArray[e.detail.value]
				uni.setStorageSync('shopId', this.currentStore.shopId)
				this.getStoreProductionModel()
			},
			// 开启保洁
			beginClear() {
				uni.showModal({
					title: '提示',
					content: '是否开启保洁？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/openClear/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.closePopEvent()
								this.getData(true)
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 开门
			openDoor() {
				uni.showModal({
					title: '提示',
					content: '是否确认开门？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/openDoor/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 通电
			openElectronic() {
				uni.showModal({
					title: '提示',
					content: '是否确认通电？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/openElectronic/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 断电
			closeElectronic() {
				uni.showModal({
					title: '提示',
					content: '是否确认断电？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/closeElectronic/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 结束订单
			finishOrder() {
				uni.showModal({
					title: '提示',
					content: '是否确认结束订单？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/order/beforeEnd/${this.currentProduct.useOrderId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.currentProduct.useStatus = '2'
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 完成保洁
			clearSuccess() {
				uni.showModal({
					title: '提示',
					content: '是否确认完成保洁？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/clearSuccess/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.currentProduct.useStatus = '1'
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 开启维护
			startMaintenance() {
				uni.showModal({
					title: '提示',
					content: '是否确认开启维护？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/startMaintenance/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.currentProduct.useStatus = '3'
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 完成维护
			maintenanceSuccess() {
				uni.showModal({
					title: '提示',
					content: '是否确认完成维护？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/product/maintenanceSuccess/${this.currentProduct.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.currentProduct.useStatus = '1'
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
								this.closePopEvent()
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 请求店铺列表
			requestEvent() {
				this.$request({
					method: 'get',
					url: '/applet/store/shop/list',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeArray = res.data || []
					if (this.storeArray.length > 0) {
						let storageShopId = uni.getStorageSync('shopId')
						if (storageShopId) {
							this.storeArray.forEach((item) => {
								if (item.shopId === storageShopId) {
									this.currentStore = item
								}
							})
						} else {
							this.currentStore = this.storeArray[0]
							uni.setStorageSync('shopId', this.currentStore.shopId)
						}
						this.getStoreProductionModel()
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},

			// swiper划动加载
			animationFinished(e) {
				this.current = e.detail.current
				// 填充数据
				// this.fillData()
			},
			// tab切换加载
			changeTab(index) {
				this.current = index
				// 填充数据
				this.fillData()
			},
			// 填充数据方法
			fillData() {
				if (this.list[this.current].data.length < 1 && this.currentStore?.shopId) {
					// 当没有数据的时候才请求
					this.getData()
				}
			},
			// 滚动加载
			getDataEvent() {
				// 数据列表小于总列表数时请求
				if (this.list[this.current].data.length < this.list[this.current].total) {
					this.list[this.current].pageNum++
					this.getData()
				}
			},
			// 获取列表数据
			getData(flash) {
				const data = {
					pageNum: this.list[this.current].pageNum,
					pageSize: 10,
					shopId: this.currentStore.shopId,
					modelType: this.tabsDetailArr[this.current].modelType
				}
				this.$request({
					method: 'post',
					url: `/applet/store/product/list`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					const {
						total,
						rows
					} = res
					if (flash) {
						this.$set(this.list[this.current], 'data', [])
					}
					this.$set(this.list[this.current], 'data', [...this.list[this.current].data, ...rows])
					this.list[this.current].total = total
				})
			},
			// 获取门店产品类型
			getStoreProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/openModelList/${this.currentStore.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.tabsDetailArr = res?.data || []
					this.tabs = []
					this.list = []
					this.tabsDetailArr.forEach((item) => {
						this.tabs.push(item.modelName)
						this.list.push({
							loadmore: 'loadmore',
							pageNum: 1,
							total: 0,
							data: []
						})
					})
					this.updateKey++
					if (this.tabsDetailArr.length) {
						this.current = 0
						this.getData()
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
		},
		onShow() {
			this.requestEvent()
		}
	}
</script>

<style lang="scss" scoped>
	.my-room {
		background: #FFF;

		.box-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
		}

		.box-header-left {
			flex: 1;
			padding: 20rpx 40rpx;
			background: #ffd589;
			border-radius: 20rpx;
			box-shadow:
				7px 7px 12px rgba(0, 0, 0, 0.4),
				inset 0 0 0 rgba(255, 255, 255, 0.9),
				inset 0 0 0 rgba(0, 0, 0, 0.4);
		}

		.inner-top {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.inner-bottom {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			flex-wrap: wrap;
			height: 44px;
			
			span{
				margin-right: 20rpx;
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			background-color: #FFF;
			box-shadow: 0px 4px 10rpx rgba(0, 0, 0, 0.1);
		}

		.container-tabs__list {
			height: calc(100vh - 248rpx);

			.container-tabs__swiper {
				height: 100%;
			}
		}

		/* #ifdef H5 */
		.container-tabs__list {
			height: calc(100vh - 248px);
		}

		/* #endif */

		.scroll-box {
			height: 100%;
		}

		.order-cart-list {
			padding: 20rpx;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

		.btn-box {
			.common-btn {
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				color: #FFF;
				font-size: 28rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bg-01 {
				background: #02a7f0;
			}

			.bg-02 {
				background: #70b603;
			}

			.bg-03 {
				background: #ec808d;
			}

			.bg-04 {
				background: #c280ff;
			}

			.bg-05 {
				background: #d9001b;
			}

			.bg-06 {
				background: #b8741a;
			}

			.bg-07 {
				background: #f59a23;
			}

			.bg-08 {
				background: #bfbf00;
			}

			.bg-09 {
				background: #00bfbf;
			}
		}

	}
</style>